import { dateFormat } from '@/utils/time';
import { View } from '@tarojs/components';
import classNames from 'classnames';
import React, { useState } from 'react';
import CountDown from '../Countdown';
import { useCountdown } from '../hooks/useCountdown';
import styles from './index.module.scss';

const Detail = ({ active, inputStart, finished, start, end }) => {
  // 未开始：月-日 时：分 开始
  // 进行中-结束时间7天以上：进行中
  // 进行中-结束时间1-7天：n天后结束
  // 进行中-结束时间24小时内：时分秒倒计时

  // 已结束
  if (finished) {
    return <View className={classNames('plain', { customePageStyle: active })}>已结束</View>;
  }

  // 未开始：月-日 时：分 开始
  if (start) {
    return (
      <View className={classNames('plain', { customePageStyle: active })}>
        {dateFormat(inputStart, 'MM.dd hh:mm')} 开始
      </View>
    );
  }

  if (!end) {
    return null;
  }

  const { day, hour, minute, second } = end;

  // 进行中-结束时间7天以上：进行中
  if (day > 7) {
    return <View className={classNames('plain', { customePageStyle: active })}>进行中</View>;
  }

  // 进行中-结束时间1-7天：n天后结束
  if (day >= 1) {
    return (
      <View className={classNames('plain', { customePageStyle: active })}>
        <View className={classNames('block', { customePageBackgroundStyle: active })}>{day}</View>
        天后结束
      </View>
    );
  }

  // 进行中-结束时间24小时内：时分秒倒计时
  return <CountDown {...{ hour, minute, second, active }} />;
};

const ActivityStatus = ({ className, start: inputStart, end: inputEnd, active = false }) => {
  const [status, setStatus] = useState();

  // 定时器刷新
  useCountdown(setStatus, inputStart, inputEnd);

  return (
    <View className={`${styles.ActivityStatus} ${className ?? ''}`}>
      <Detail {...{ active, inputStart, ...status }} />
    </View>
  );
};

export default ActivityStatus;
